import React, { Component } from 'react';

import { Form, Input, Button, Row, Col, message } from 'antd';
import { connect } from 'dva';
import GetYCodeFormItem from '../../components/GetYCodeFormItem';
const FormItem = Form.Item;

@Form.create()
@connect(({ loading, editPhone: { information } }) => ({
  information,
  load: loading.effects['editPhone/queryUserInformation'],
  loading: loading.effects['editPhone/setCheckPhone'],
}))
class CheckPhone extends Component {
  state = {
    confirmDirty: false,
  };

  componentDidMount() {
    // this.props.changeCurrent(1);
    this.props.dispatch({
      type: 'editPhone/queryUserInformation',
    });
  }

  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch, changeCurrent } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      const code = values.code
      if (!err) {
        dispatch({
          type: 'editPhone/setCheckPhone',
          payload: values
        })
          .then(msg => {
            changeCurrent(1,code);
          })
          .catch(errMsg => {
            message.error(errMsg);
          });
      }
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      form,
      loading,
      information
    } = this.props;
    console.log('=====>', information)
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <Row>
          <Col span={10}>
            <FormItem label="绑定手机号" {...formItemLayout}>
              {getFieldDecorator('phone', {
                initialValue: information&&information.mobile,
                // initialValue: '15815504471',
              })(
                <Input
                  disabled
                  style={{
                    border: 'none',
                    backgroundColor: 'transparent',
                    fontSize: '20px',
                    color: '#000',
                  }}
                // placeholder="邮箱地址"
                />
              )}
            </FormItem>
          </Col>
        </Row>

        {/* <GetYCodeFormItem form={form} validField="phone" type="phone" formItemLayout={formItemLayout} /> */}
        <GetYCodeFormItem
              disabled={loading}
              id="code"
              validField="phone"
              type="phone"
              serviceType={3}
              // focus={!!initialAccount}
              form={form}
              formItemLayout={formItemLayout}
            />

        <Row>
          <Col span={10} offset={2}>
            <Button type="primary" htmlType="submit" disabled={loading}>
              {loading ? '请稍后' : '下一步'}
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }
}
export default CheckPhone;
